<template>
    <!-- <el-card> -->
    <div class="titles">新增团队信息</div>

    <p class="mu-small-title">团队信息</p>

    <el-form :model="addTeamData">
        <div class="allInput">

            <!-- <div class="inputFlex"> -->
            <!-- <el-form-item style="margin-right: 10px;">团队编号</el-form-item> -->
            <!-- <template v-for="item in teamData.rows">
                    <el-form-item>{{ item._id }}</el-form-item>
                </template> -->
            <!-- </div> -->
            <div class="inputFlex">
                <el-form-item style="margin-right: 10px;">团队名称</el-form-item>
                <el-input v-model="addTeamData.name" type="text" style="width: 200px; height: 35px;" />
            </div>
            <!-- <div class="inputFlex"> -->
            <!-- <el-form-item>团队头像</el-form-item> -->
            <!-- <el-img v-model="addTeamData.avatar"></el-img> -->
            <!-- <el-form-item>+点击上传</el-form-item> -->
            <!-- </div> -->
            <!-- </div> -->
            <!-- <div class="allInput"> -->

            <div class="inputFlex">
                <el-form-item style="margin-right: 10px;"> 所属机构</el-form-item>
                <el-select style="width: 200px;height: 50px;" v-model="addTeamData.organizationId" clearable>
                    <template v-for="item in organization" :key="item._id">
                        <el-option :label="item.name" :value="item._id" />
                    </template>
                </el-select>
            </div>
            <!-- <div class="inputFlex"> -->
            <!-- <el-form-item style="margin-right: 10px;">团队标签</el-form-item> -->
            <!-- <el-select style="width: 200px;height: 40px;" v-model="addTeamData.tagIds"> -->
            <!-- <template v-for="item in teamData.rows" :key="item._id">
                            <template v-for="item1 in item.tagIds">
                                <el-option :label="item1.name" :value="item1._id" />
                            </template>
                        </template> -->
            <!-- </el-select> -->
            <!-- </div> -->
        </div>
    </el-form>

    <p style="text-align: left; padding-bottom: 0;" class="mu-small-title">团队成员</p>
    <el-card class="teamBox">
        <img :src="adminStore.adminInfo?.avatar" class="teamImg">
        <div class="info" style="margin-left: 100px;">
            <p class="name">{{ adminStore.adminInfo?.name }}</p>
            <p style="color: #999; font-size: 12px; margin: 10px 0;">{{ adminStore.adminInfo?.roleId.name }}</p>
            <p style="color: #999; font-size: 12px;">签约人数：{{ adminStore.adminInfo?.signNumber }}</p>
        </div>
        <el-button style="position: absolute; top: 135px; right: 20px;"
            @click="doctorRef?.openDrawer(adminStore.adminInfo?._id)">
            医师详情
        </el-button>
        <span
            style="position: absolute; top: 95px; left: 26px; background-color: #FDDB78; border-radius: 6px; color: #fff; font-size: 12px; padding: 1px 8px;">
            团队长
        </span>
    </el-card>

    <p style="text-align: left; padding-bottom: 0;" class="mu-small-title">服务包</p>
    <!-- 服务包容器 -->
    <div class="add-service-package-container">
        <!-- 添加按钮 -->
        <div class="btn" @click="open = true">
            <p>+</p>
            <p>添加一个服务包</p>
        </div>
        <!-- 选中的每个服务包 -->
        <el-card class="teamBox" v-for="item in checkedServicePackages" :key="item._id">
            <img :src="item.image" class="teamImg">
            <div class="info" style="margin-left: 100px;">
                <p class="name">{{ item.name }}</p>
                <p style="color: #999; font-size: 12px; margin: 10px 0;">使用人群：{{ item.client }}</p>
                <p style="color: #999; font-size: 12px; color: purple;">服务包类型：{{ item.type }}</p>
            </div>
            <el-button style="position: absolute; top: 135px; right: 20px;" @click="packRef.openWin(item, item._id)">
                服务包详情
            </el-button>
        </el-card>
    </div>

    <div class="commit">
        <el-button type="primary" style="width: 76px;height: 45px;" @click="accAddTeam()">保存</el-button>
        <el-button style="width: 76px;height: 45px;" @click="backs()">返回</el-button>
    </div>

    <!-- </el-card> -->

    <!-- 医生详情（抽屉） -->
    <DoctorDetail ref="doctorRef"></DoctorDetail>
    <!-- 服务包（抽屉） -->
    <ServicePack ref="packRef"></ServicePack>

    <!-- 服务包列表弹窗 -->
    <el-dialog v-model="open" title="选择服务包">
        <div class="container"
            style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
            <el-card class="teamBox" style="width: 290px; height: 130px;" v-for="item in servicePacksData.rows"
                :key="item._id">
                <input v-model="checkedServicePackages" :value="{ ...item }" type="checkbox"
                    style="position: absolute; top: 10px; left: 10px;">
                <img :src="item.image" class="teamImg">
                <div class="info" style="margin-left: 100px;">
                    <p class="name">{{ item.name }}</p>
                    <p style="color: #999; font-size: 12px; margin: 10px 0;">服务对象：{{ item.client }}</p>
                    <p style="color: #999; font-size: 12px;">类型：{{ item.type }}</p>
                </div>
            </el-card>
        </div>
    </el-dialog>
</template>

<script setup>
// import { addTeamApi } from '@/api/team';
import { addTeamApi, searchOrganizationApi } from '@/api/team';
import { useGlobalStore } from '@/store/global';
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import { useRouter } from 'vue-router';
import DoctorDetail from './DoctorDetail.vue';
import ServicePack from './ServicePack.vue';
import { useFindData } from '@/composables/findData';



const checkedServicePackages = ref([]);

const open = ref(false);

const { findServicePacks, servicePacksData } = useFindData();

watch(open, () => {
    if (open) {
        findServicePacks();
    }
});

const doctorRef = useTemplateRef('doctorRef')
const packRef = useTemplateRef('packRef')

const adminStore = useGlobalStore();

const router = useRouter()

// defineProps(['teamData'])
// 添加团队数据
const addTeamData = ref({
    leaderId: '686f2fdd0b991e21ee16fc06'
})

// 机构默认值
const organization = ref([])
// watch(addTeamData, () => {
//     console.log(addTeamData.value);

// })
// 添加请求
async function accAddTeam() {
    const servicePackIds = checkedServicePackages.value.map(item => item._id);
    // console.log({
    //     ...addTeamData.value,
    //     leaderId: adminStore.adminInfo?._id,
    //     servicePackIds
    // });
    const res = await addTeamApi({
        ...addTeamData.value,
        leaderId: adminStore.adminInfo?._id,
        servicePackIds
    })
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '添加成功',
        })
        backs();
    }
}

function backs() {
    router.push('/data/team/list')

}



// 查询机构(下拉框)
async function searchOrganization() {
    const res = await searchOrganizationApi()
    if (res.code == 200) {
        // console.log(res);
        organization.value = res.data.rows
    }
}

onMounted(() => {
    searchOrganization()
})


</script>

<style lang="scss" scoped>
.add-service-package-container {
    display: grid;
    grid-template-columns: repeat(4, 390px);
    justify-content: space-between;

    .btn {
        width: 340px;
        height: 183px;

        margin-top: 20px;

        border: 1px solid #eee;
        border-radius: 10px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background-color: #F2F7FB;

        color: rgba($color: #2984F8, $alpha: 0.3);
        font-weight: bold;

        cursor: pointer;
    }

    .btn:hover {
        color: rgba($color: #2984F8, $alpha: 1.0);
    }
}

.el-select__wrapper {
    min-height: 40px;
}

.allInput {
    display: flex;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.title {
    text-align: left;

    padding: 20px 0;
}



.commit {
    margin-top: 40px;
    margin-bottom: 40px;
    float: left;
}

.teamBox {
    width: 340px;
    height: 183px;
    // color: #e4e7ed;
    position: relative;
    margin-top: 20px;
}



.inputFlex {
    display: flex;
}
</style>
<style>
.titles {
    text-align: left;
    border-left: #2984f8 5px solid;
    padding-left: 10px;
}

.teamImg {
    width: 88px;
    height: 88px;
    float: left;
    border-radius: 10px;
}
</style>